<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
     <el-table-column prop="orderNum" label="订单号"></el-table-column>
      <el-table-column label="论文题目">
        <template slot-scope="scope">
          {{ scope.row.titleName }}
        </template>
      </el-table-column>
      <el-table-column label="作者" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.authorName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" label="论文名称"></el-table-column>
      <el-table-column prop="fileState" label="论文状态">
        <template slot-scope="scope">
            <el-link :underline="false" v-if="scope.row.fileState == 2 || scope.row.fileState == 3" type="success">{{scope.row.fileState | fileStateFlt}}</el-link>
            <el-link :underline="false" v-if="scope.row.fileState < 2" type="warning">{{scope.row.fileState | fileStateFlt}}</el-link>
            <el-link :underline="false" v-if="scope.row.fileState == 4">{{scope.row.fileState | fileStateFlt}}</el-link>
            <el-link :underline="false" type="error" v-if="scope.row.fileState == 5">{{scope.row.fileState | fileStateFlt}}</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.updateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link style="margin-left: 10px;" :underline="false" size="mini" type="success" @click="downClick(scope.row.titleUrl)">下载原文</el-link>
          <el-upload
            class="upload-demo"
            :action="baseUrl + '/submitReportUpload?OrderNum=' + scope.row.orderNum"
            :limit="1"
            :show-file-list="false"
            :on-success="success"
            >
            <el-link style="margin-left: 10px;" :underline="false" size="mini" type="primary">上传报告</el-link>
<!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>
          <el-link style="margin-left: 10px;" :underline="false" size="mini" type="danger" @click="delClick(scope.row.orderNum)">删除报告</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-size="pageSize" :current-page.sync="pageNum" background layout="prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import tableApi from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      baseUrl: process.env.VUE_APP_BASE_API
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      tableApi.getList({code: 6666, count: this.pageSize, pageNum: this.pageNum}).then(res => {
        this.list = res.data.items[0]
        this.total = res.data.total
        this.listLoading = false
      }).finally(() => {
        this.listLoading = false
      })
    },
    sizeChange() {
      this.fetchData()
    },
    currentChange() {
      this.fetchData()
    },
    downClick(url) {
      window.open(url)
    },
    success() {
      this.$message.success("上传成功！")
    },
    delClick(orderNum) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tableApi.del({orderNum: orderNum}).then(data => {
          console.log("data", data);
          if (data.code == 0) {
            this.$message.success(data.msg)
            this.fetchData()
          } else {
            this.$message.error(data.msg)
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true});
        });
      }).catch(() => {
      });
    }
  }
}
</script>
